<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="body/main">
<head>
    <meta charset="UTF-8">
    <title>客户关系管理系统</title>
</head>
<body>
<div class="right_col" role="main" layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            客户贡献分析 <i class="fa fa-user"></i><small th:text="${session.loginUser.usrName }">用户名</small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form method="post" action="/user/list" th:action="@{/api/customer/findByCustomer}">
                            <input type="hidden" name="index" value="1" />
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-4 col-sm-4 col-xs-12">客户名称</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="custName" type="text" class="form-control col-md-7 col-xs-12" th:value="${custName}">
                                        </div>
                                    </div>
                                </li>
                                <li><button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询 </button></li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a class="btn btn-success btn-sm" th:href="@{/api/customer/excel}">导出为Excel</a>
                                    <a class="btn btn-success btn-sm" th:href="@{/api/customer/pdf}" target="_blank">导出为Pdf</a>
                                    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">客户编号</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                客户名称</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                金额(万元)</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" th:each="customer,status : ${pages.getRecords()}">
                                            <td tabindex="0" class="sorting_1" th:text="${customer.custNo}"></td>
                                            <td th:text="${customer.custName}"></td>
                                            <td th:text="${customer.custTurnover}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="dataTables_info" id="datatable-responsive_info"
                                         role="status" aria-live="polite">共<span th:text="${pages.getTotal()}"></span>条记录
                                        <span th:text="${pages.getCurrent()}"></span>/<span th:text="${pages.getPages()}"></span>页</div>
                                </div>

                                <div class="col-sm-7">
                                    <div class="dataTables_paginate paging_simple_numbers"
                                         id="datatable-responsive_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button previous" th:if="${pages.getCurrent() gt 1}"><a
                                                    href="javascript:page_nav(document.forms[0],1);"
                                                    aria-controls="datatable-responsive" data-dt-idx="0"
                                                    tabindex="0">首页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${pages.getCurrent() gt 1}"><a
                                                    href="#"th:onclick="'javascript:page_nav(document.forms[0],'+${pages.getCurrent() - 1}+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">上一页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${pages.getCurrent() lt pages.getPages()}"><a
                                                    href="#"th:onclick="'javascript:page_nav(document.forms[0],'+${pages.getCurrent() + 1}+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">下一页</a>
                                            </li>
                                            <li class="paginate_button next" th:if="${pages.getCurrent() lt pages.getPages()}"><a
                                                    href="#"th:onclick="'javascript:page_nav(document.forms[0],'+${pages.getPages()}+');'";
                                                    aria-controls="datatable-responsive" data-dt-idx="7"
                                                    tabindex="0">最后一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-20">
                                    <div id="main" style="width: 800px;height:450px;margin-left: 12%"  align="center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
</div>
</body>
<script layout:fragment="js" th:inline="javascript">
$(document).ready(function(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();
    var values=[];
    //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/crm/api/customer/findCustChieftain",    //请求发送到dataActiont处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(data) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (data) {
                for(var i=0;i<data.length;i++){
                    var test={"value":data[i].custTurnover, "name":data[i].custName};
                    values.push(test);

                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption(
                    {
                        title: {
                            text: '客户贡献统计图',
                            subtext: '年营业额',
                            left: 'center'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: values
                        },
                        series: [
                            {
                                name: '贡献来源',
                                type: 'pie',
                                radius: '60%',
                                center: ['50%', '50%'],
                                data:values,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                );
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });//end ajax
});//刷新方法结束
</script>
</html>